<template>
  <div id="translateForm" class="row">
    <div class="col-md-6 center">
      <form v-on:submit="formSubmit" class="well form-inline" id="transForm">
        <input class="form-control" type="text" placeholder="输入需要翻译的内容" v-model="textToTranslate">
        <select id="" v-model="language" class="form-control">
          <option value="en">English</option>
          <option value="ru">Russian</option>
          <option value="ko">Korean</option>
          <option value="ja">Japanese</option>
        </select>
        <input type="submit" value="翻译" class="btn btn-primary">
      </form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'translateForm',
  data:function(){//
    return {
      textToTranslate:'',
      language:''
    }
  },
  methods:{
    formSubmit:function(e){
      this.$emit("formaa",this.textToTranslate,this.language);//事件注册
      e.preventDefault();
    }
  },
  created:function(){//由于指定的language为空刷新页面没有默认，所以指定一个默认的语言，created 自动执行方法
    this.language = 'en'
  }

}
</script>

<style>
#transForm{
  border:1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
}
  .center{
    text-align: center;
    margin: 0 auto;
  }
</style>
